<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WMS仓库管理系统 - 大屏展示</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 20px;
            min-height: 100vh;
        }

        .container {
            max-width: 1800px;
            margin: 0 auto;
        }

        h1 {
            text-align: center;
            color: white;
            font-size: 48px;
            margin-bottom: 30px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .overview-section {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            margin-bottom: 30px;
        }

        .overview-card {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
        }

        .overview-card h2 {
            color: #667eea;
            font-size: 28px;
            margin-bottom: 20px;
            border-bottom: 3px solid #667eea;
            padding-bottom: 10px;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
            margin-top: 20px;
        }

        .stat-item {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 20px;
            border-radius: 10px;
            color: white;
            text-align: center;
        }

        .stat-label {
            font-size: 16px;
            opacity: 0.9;
            margin-bottom: 10px;
        }

        .stat-value {
            font-size: 32px;
            font-weight: bold;
        }

        .stat-button {
            display: inline-block;
            padding: 10px 20px;
            background: #28a745;
            color: white;
            border-radius: 5px;
            margin-top: 10px;
            font-size: 14px;
        }

        .charts-section {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }

        .chart-card {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
        }

        .chart-card h2 {
            color: #667eea;
            font-size: 28px;
            margin-bottom: 20px;
            text-align: center;
        }

        .chart-container {
            width: 100%;
            height: 400px;
        }

        .loading {
            text-align: center;
            padding: 50px;
            color: white;
            font-size: 24px;
        }

        .error {
            background: #f44336;
            color: white;
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 20px;
            text-align: center;
        }

        .refresh-info {
            text-align: center;
            color: white;
            margin-top: 20px;
            font-size: 14px;
            opacity: 0.8;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🏭 WMS仓库管理系统 - 大屏展示</h1>
        
        <div id="error-message" class="error" style="display: none;"></div>
        <div id="loading" class="loading">正在加载数据...</div>
        
        <div id="dashboard-content" style="display: none;">
            <!-- 概况统计 -->
            <div class="overview-section">
                <!-- 今日概况 -->
                <div class="overview-card">
                    <h2>📊 今日概况</h2>
                    <div class="stats-grid">
                        <div class="stat-item">
                            <div class="stat-label">单据数量</div>
                            <div class="stat-value" id="today-orders">0</div>
                            <div class="stat-button">入库</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-label">单据数量</div>
                            <div class="stat-value" id="today-orders-out">0</div>
                            <div class="stat-button" style="background: #ffc107;">出库</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-label">入库数量</div>
                            <div class="stat-value" id="today-in-qty">0</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-label">出库数量</div>
                            <div class="stat-value" id="today-out-qty">0</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-label">入库金额</div>
                            <div class="stat-value" id="today-in-amount">0.00</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-label">出库金额</div>
                            <div class="stat-value" id="today-out-amount">0.00</div>
                        </div>
                    </div>
                </div>

                <!-- 昨日概况 -->
                <div class="overview-card">
                    <h2>📈 昨日概况</h2>
                    <div class="stats-grid">
                        <div class="stat-item">
                            <div class="stat-label">单据数量</div>
                            <div class="stat-value" id="yesterday-orders">0</div>
                            <div class="stat-button">入库</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-label">单据数量</div>
                            <div class="stat-value" id="yesterday-orders-out">0</div>
                            <div class="stat-button" style="background: #ffc107;">出库</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-label">入库数量</div>
                            <div class="stat-value" id="yesterday-in-qty">0</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-label">出库数量</div>
                            <div class="stat-value" id="yesterday-out-qty">0</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-label">入库金额</div>
                            <div class="stat-value" id="yesterday-in-amount">0.00</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-label">出库金额</div>
                            <div class="stat-value" id="yesterday-out-amount">0.00</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 图表展示 -->
            <div class="charts-section">
                <!-- 库存数量占比 -->
                <div class="chart-card">
                    <h2>📦 库存数量占比</h2>
                    <div id="quantity-chart" class="chart-container"></div>
                    <div style="text-align: center; margin-top: 10px;">
                        <span style="font-size: 24px; color: #667eea;">总库存</span>
                        <span style="font-size: 32px; font-weight: bold; color: #667eea;" id="total-quantity">0</span>
                    </div>
                </div>

                <!-- 库存金额占比 -->
                <div class="chart-card">
                    <h2>💰 库存金额占比</h2>
                    <div id="amount-chart" class="chart-container"></div>
                    <div style="text-align: center; margin-top: 10px;">
                        <span style="font-size: 24px; color: #667eea;">总金额</span>
                        <span style="font-size: 32px; font-weight: bold; color: #667eea;" id="total-amount">0.00</span>
                    </div>
                </div>
            </div>

            <div class="refresh-info">
                ⏱️ 数据每60秒自动刷新 | 最后更新时间: <span id="last-update"></span>
            </div>
        </div>
    </div>

    <script>
        let quantityChart = null;
        let amountChart = null;

        // 初始化图表
        function initCharts() {
            quantityChart = echarts.init(document.getElementById('quantity-chart'));
            amountChart = echarts.init(document.getElementById('amount-chart'));
            
            // 监听窗口大小变化
            window.addEventListener('resize', () => {
                quantityChart.resize();
                amountChart.resize();
            });
        }

        // 加载数据
        async function loadDashboardData() {
            try {
                const response = await axios.get('/api/Dashboard/GetDashboardData');
                
                if (response.data.success) {
                    const data = response.data.data;
                    
                    // 更新今日概况
                    document.getElementById('today-orders').textContent = data.todayOverview.orderCount;
                    document.getElementById('today-orders-out').textContent = data.todayOverview.orderCount;
                    document.getElementById('today-in-qty').textContent = data.todayOverview.inboundQuantity;
                    document.getElementById('today-out-qty').textContent = data.todayOverview.outboundQuantity;
                    document.getElementById('today-in-amount').textContent = data.todayOverview.inboundAmount.toFixed(2);
                    document.getElementById('today-out-amount').textContent = data.todayOverview.outboundAmount.toFixed(2);
                    
                    // 更新昨日概况
                    document.getElementById('yesterday-orders').textContent = data.yesterdayOverview.orderCount;
                    document.getElementById('yesterday-orders-out').textContent = data.yesterdayOverview.orderCount;
                    document.getElementById('yesterday-in-qty').textContent = data.yesterdayOverview.inboundQuantity;
                    document.getElementById('yesterday-out-qty').textContent = data.yesterdayOverview.outboundQuantity;
                    document.getElementById('yesterday-in-amount').textContent = data.yesterdayOverview.inboundAmount.toFixed(2);
                    document.getElementById('yesterday-out-amount').textContent = data.yesterdayOverview.outboundAmount.toFixed(2);
                    
                    // 更新总计
                    document.getElementById('total-quantity').textContent = data.totalInventoryQuantity.toLocaleString();
                    document.getElementById('total-amount').textContent = data.totalInventoryAmount.toFixed(2);
                    
                    // 渲染图表
                    renderQuantityChart(data.inventoryQuantityByWarehouse);
                    renderAmountChart(data.inventoryAmountByWarehouse);
                    
                    // 显示内容，隐藏加载
                    document.getElementById('loading').style.display = 'none';
                    document.getElementById('dashboard-content').style.display = 'block';
                    document.getElementById('error-message').style.display = 'none';
                    
                    // 更新时间
                    document.getElementById('last-update').textContent = new Date().toLocaleString('zh-CN');
                } else {
                    showError(response.data.message);
                }
            } catch (error) {
                showError('加载数据失败: ' + error.message);
            }
        }

        // 渲染库存数量饼图
        function renderQuantityChart(data) {
            const colors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452'];
            
            const option = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}<br/>数量: {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    right: 10,
                    top: 'center',
                    textStyle: {
                        fontSize: 14
                    }
                },
                color: colors,
                series: [
                    {
                        name: '库存数量',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: true,
                            formatter: '{b}\n{c}'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 16,
                                fontWeight: 'bold'
                            }
                        },
                        data: data.map(item => ({
                            name: item.warehouseName,
                            value: item.quantity
                        }))
                    }
                ]
            };
            
            quantityChart.setOption(option);
        }

        // 渲染库存金额饼图
        function renderAmountChart(data) {
            const colors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452'];
            
            const option = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}<br/>金额: ¥{c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    right: 10,
                    top: 'center',
                    textStyle: {
                        fontSize: 14
                    }
                },
                color: colors,
                series: [
                    {
                        name: '库存金额',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: true,
                            formatter: '{b}\n¥{c}'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 16,
                                fontWeight: 'bold'
                            }
                        },
                        data: data.map(item => ({
                            name: item.warehouseName,
                            value: item.amount
                        }))
                    }
                ]
            };
            
            amountChart.setOption(option);
        }

        // 显示错误
        function showError(message) {
            document.getElementById('error-message').textContent = '❌ ' + message;
            document.getElementById('error-message').style.display = 'block';
            document.getElementById('loading').style.display = 'none';
        }

        // 初始化
        window.addEventListener('load', () => {
            initCharts();
            loadDashboardData();
            
            // 自动刷新（每60秒）
            setInterval(loadDashboardData, 60000);
        });
    </script>
</body>
</html>


